<template>
  <div class="row">
    <div class="title">{{ title }}</div>
    <div class="content">
      <!-- <input
        :placeholder="tip"
        type="number"
        :value="value"
        :disabled="disabled"
        @input="$emit('input', $event.target.value)"
      /> -->
      <van-field
        v-model="digit"
        :placeholder="tip"
        :disabled="disabled"
        type="number"
        :border="false"
        @input="inputChange"
        @blur="inputBlur"
      />
      <div @click="showPopup" style="width: 60px">
        <span v-if="unit" class="unit">{{ unit }}</span>
        <van-icon v-if="unitList.length > 1" name="arrow-down" />
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :round="true">
      <van-picker
        ref="pickerForUnit"
        title="选择单位"
        show-toolbar
        :columns="unitList"
        visible-item-count="3"
        swipe-duration="1"
      />
      <div class="btn_box">
        <button class="btn large" @click="confirmUnit">确定</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'inputCardItem',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 内容
    value: {
      type: [String, Number],
      default: ''
    },
    // 提示
    tip: {
      type: String,
      default: ''
    },
    // 单位
    unit: {
      type: String,
      default: ''
    },
    unitList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false,
      digit: ''
    }
  },
  watch: {
    value(n, o) {
      if (n) {
        this.digit = this.value
      }
    }
  },
  created() {},
  methods: {
    inputBlur(e) {
      let str = e.target.value
      let num = Number(str)
      if (num <= 0) {
        this.$toast('输入不能小于0')
        this.digit = ''
        this.$emit('input', '')
      }
    },
    inputChange(e) {
      this.$emit('input', e)
    },
    showPopup() {
      if (this.unitList.length <= 1) return false
      this.show = true
    },

    confirmUnit() {
      let newUnit = this.$refs.pickerForUnit.getValues()[0]
      this.$emit('changeUnit', newUnit)
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell {
  padding: 0 !important;
}

// input禁用-样式
input:disabled {
  background-color: #fff;
  color: #656c74;
}
.black {
  color: #171819;
}
.disabled {
  color: #656c74;
}
.row {
  .title {
    font-family: PingFang SC Regular;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    color: #171819;
  }

  .content {
    font-family: PingFang SC Regular;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #171819;
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    input {
      width: 270px;
    }

    &::after {
      content: '';
      width: 100%;
      height: 0.5px;
      background: #e2e7ec;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .tip {
      font-family: PingFang SC Regular;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0px;
      color: #b2b8bd;
    }

    .option {
      font-family: PingFang SC Medium;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0px;
      /* 蓝 */
      color: #2163e0;
      flex-shrink: 0; // 禁止自动压缩
    }

    .unit {
      font-family: PingFang SC Medium;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      text-align: right;
      letter-spacing: 0px;
      /* 粤商通/常规黑色 */
      color: #171819;
    }
  }

  &:last-child {
    .content {
      margin-bottom: 0;

      &::after {
        display: none !important;
        height: 40px;
      }
    }
  }
}
</style>
